<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.41">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <link rel="icon" href="/img/m3-favicon.ico"><title>Card 卡片 | Material You</title><meta name="description" content="A material you components library">
    <link rel="modulepreload" href="/assets/app.e276f379.js"><link rel="modulepreload" href="/assets/card.html.3c470ede.js"><link rel="modulepreload" href="/assets/card.html.90270275.js"><link rel="prefetch" href="/assets/index.html.5ec085b8.js"><link rel="prefetch" href="/assets/index.html.faba272a.js"><link rel="prefetch" href="/assets/button.html.9a157bdb.js"><link rel="prefetch" href="/assets/chips.html.23c0ec20.js"><link rel="prefetch" href="/assets/color.html.24bf07b5.js"><link rel="prefetch" href="/assets/elevation.html.6d0dc9e8.js"><link rel="prefetch" href="/assets/extended-FAB.html.ae055c31.js"><link rel="prefetch" href="/assets/FAB.html.9703ad9f.js"><link rel="prefetch" href="/assets/icon-button.html.f9979ea3.js"><link rel="prefetch" href="/assets/icon.html.558fb522.js"><link rel="prefetch" href="/assets/ripple.html.cce83c60.js"><link rel="prefetch" href="/assets/space.html.78b6814e.js"><link rel="prefetch" href="/assets/typescale.html.da01ad90.js"><link rel="prefetch" href="/assets/404.html.93146c89.js"><link rel="prefetch" href="/assets/index.html.401cf6b1.js"><link rel="prefetch" href="/assets/index.html.7fc92e7f.js"><link rel="prefetch" href="/assets/button.html.2a02a5c9.js"><link rel="prefetch" href="/assets/chips.html.6a8caa7a.js"><link rel="prefetch" href="/assets/color.html.b31992de.js"><link rel="prefetch" href="/assets/elevation.html.e09a904f.js"><link rel="prefetch" href="/assets/extended-FAB.html.f19f4755.js"><link rel="prefetch" href="/assets/FAB.html.0a0f59fd.js"><link rel="prefetch" href="/assets/icon-button.html.59b0be9b.js"><link rel="prefetch" href="/assets/icon.html.bc738a56.js"><link rel="prefetch" href="/assets/ripple.html.f2400654.js"><link rel="prefetch" href="/assets/space.html.a5708cbb.js"><link rel="prefetch" href="/assets/typescale.html.3bfe247e.js"><link rel="prefetch" href="/assets/404.html.3f3b716a.js"><link rel="prefetch" href="/assets/404.bdfdbf29.js"><link rel="prefetch" href="/assets/Layout.f4106bf1.js">
    <link rel="stylesheet" href="/assets/style.d49c7a60.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/img/m3-favicon.ico" alt="Material You"><span class="site-name can-hide">Material You</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a class="external-link" href="https://github.com/Daydreamer-riri/MaterialYouUI" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a class="external-link" href="https://github.com/Daydreamer-riri/MaterialYouUI" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">快速开始 <!----></p><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="get start"><!--[--><!--]--> get start <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><li><p tabindex="0" class="sidebar-item sidebar-heading">Styles <!----></p><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/docs/color.html" class="sidebar-item" aria-label="Color 色彩"><!--[--><!--]--> Color 色彩 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/typescale.html" class="sidebar-item" aria-label="Typography 字体"><!--[--><!--]--> Typography 字体 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/elevation.html" class="sidebar-item" aria-label="Elevation 海拔"><!--[--><!--]--> Elevation 海拔 <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">组件 <!----></p><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><p tabindex="0" class="sidebar-item">基础 <!----></p><!----></li><li><a href="/guide/docs/button.html" class="sidebar-item" aria-label="Common buttons 通用按钮"><!--[--><!--]--> Common buttons 通用按钮 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/icon.html" class="sidebar-item" aria-label="Icon 图标"><!--[--><!--]--> Icon 图标 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/icon-button.html" class="sidebar-item" aria-label="Icon button 图标按钮"><!--[--><!--]--> Icon button 图标按钮 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/FAB.html" class="sidebar-item" aria-label="Floating action buttons (FAB)"><!--[--><!--]--> Floating action buttons (FAB) <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/extended-FAB.html" class="sidebar-item" aria-label="Extended FAB"><!--[--><!--]--> Extended FAB <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/chips.html" class="sidebar-item" aria-label="Chips 纸片"><!--[--><!--]--> Chips 纸片 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item">布局 <!----></p><!----></li><li><a href="/guide/docs/space.html" class="sidebar-item" aria-label="Space 间距"><!--[--><!--]--> Space 间距 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item">展示 <!----></p><!----></li><li><a aria-current="page" href="/guide/docs/card.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="Card 卡片"><!--[--><!--]--> Card 卡片 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item">指令 <!----></p><!----></li><li><a href="/guide/docs/ripple.html" class="sidebar-item" aria-label="Ripple 涟漪指令"><!--[--><!--]--> Ripple 涟漪指令 <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="card-卡片" tabindex="-1"><a class="header-anchor" href="#card-卡片" aria-hidden="true">#</a> Card 卡片</h1><p>Card 卡片包含了活动信息相关的内容和动作。</p><!----><h2 id="基本使用" tabindex="-1"><a class="header-anchor" href="#基本使用" aria-hidden="true">#</a> 基本使用</h2><p>本组件提供了丰富的插槽以供实现你想要的卡片。<a href="https://m3.material.io/components/cards/guidelines" target="_blank" rel="noopener noreferrer">设计指南<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h3 id="类型" tabindex="-1"><a class="header-anchor" href="#类型" aria-hidden="true">#</a> 类型</h3><p>Card 有三种类型：elevated, filled 和 outlined。 通过<code>type</code>属性来设置 Card 类型。</p><!----><p><strong>1. elevated 2. filled 3. outlined</strong></p><p>在模板中：</p><div class="language-html ext-html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-space</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>column<span class="token punctuation">&quot;</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[24, 0]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

            <span class="token comment">&lt;!-- elevated Card --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-card</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>elevated<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ width: <span class="token punctuation">&#39;</span>370px<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span> 
                    <span class="token attr-name">subhead</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>From your recent favorites<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>headline-medium<span class="token punctuation">&quot;</span></span> 
                        <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ marginBottom: <span class="token punctuation">&#39;</span>8px<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                        Play <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
                        relaxing songs
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-space</span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-button</span><span class="token punctuation">&gt;</span></span>Get started<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-button</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-space</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-card</span><span class="token punctuation">&gt;</span></span>

            <span class="token comment">&lt;!-- filled Card --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-card</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ width: <span class="token punctuation">&#39;</span>370px<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span> 
                    <span class="token attr-name">subhead</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>From your recent favorites<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>headline-medium<span class="token punctuation">&quot;</span></span> 
                        <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ marginBottom: <span class="token punctuation">&#39;</span>8px<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                        Play <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
                        relaxing songs
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-space</span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outlined<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Get started<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-button</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-space</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-card</span><span class="token punctuation">&gt;</span></span>
            
            <span class="token comment">&lt;!-- outlined Card --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-card</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outlined<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ width: <span class="token punctuation">&#39;</span>370px<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span> 
                    <span class="token attr-name">subhead</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>From your recent favorites<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>headline-medium<span class="token punctuation">&quot;</span></span> 
                        <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ marginBottom: <span class="token punctuation">&#39;</span>8px<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                        Play <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
                        relaxing songs
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-space</span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filled-tonal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Get started<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-button</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-space</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-card</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-space</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="结构" tabindex="-1"><a class="header-anchor" href="#结构" aria-hidden="true">#</a> 结构</h3><p>我们以 Elevated card 举例。</p><!----><p>在模板中：</p><div class="language-html ext-html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-card</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>elevated<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ width: <span class="token punctuation">&#39;</span>360px<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#header</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-card-header</span> <span class="token attr-name">head</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Header<span class="token punctuation">&quot;</span></span> <span class="token attr-name">subhead</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Subhead<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#avatar</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-avatar</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-avatar</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#extra</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>more_vert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-icon</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-card-header</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#media</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>card-img<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Placeholder.png<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#subtitle</span><span class="token punctuation">&gt;</span></span>Subtitle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#content</span><span class="token punctuation">&gt;</span></span>
                Lorem ipsum dolor sit amet, consectetur 
                adipiscing elt, sed do eiusmod tempor
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#action</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-space</span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[0, 8]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outlined<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Enabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-button</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-button</span><span class="token punctuation">&gt;</span></span>Enabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-button</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-space</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-card</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Card 共拥有六个插槽，从上到下依次为：</p><ul><li>header</li><li>media</li><li>title</li><li>subtitle</li><li>content</li><li>action</li></ul><p>对于 Header，提供了<code>m-card-header</code>来支持更多的配置</p><p>Card header 拥有四个插槽，分别为：</p><ul><li>avatar</li><li>head</li><li>subhead</li><li>extra</li></ul><p><code>title</code>、<code>subtitle</code>、<code>head</code>与<code>subhead</code>都可以通过属性的方式进行设置而无需使用插槽。</p><h3 id="横向" tabindex="-1"><a class="header-anchor" href="#横向" aria-hidden="true">#</a> 横向</h3><p>Card 可以从两种方向展示内容。通过设置<code>direction</code>属性为<code>horizontal</code>，可以很方便的让卡片适应不同的设备形态。</p><p>此种状态中，header、media 与其他插槽的集合将从左到右排布。</p><!----><h3 id="添加涟漪效果" tabindex="-1"><a class="header-anchor" href="#添加涟漪效果" aria-hidden="true">#</a> 添加涟漪效果</h3><p>使用<code>v-ripple</code>指令为 Card 添加涟漪效果。</p><!----><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="card" tabindex="-1"><a class="header-anchor" href="#card" aria-hidden="true">#</a> Card</h3><h4 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h4><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td><code>type</code></td><td>Card 的类型</td><td><em>&#39;elevated&#39; | &#39;filled&#39; | &#39;outlined&#39;</em></td><td><code>elevated</code></td></tr><tr><td><code>direction</code></td><td>Card 的方向</td><td><em>&#39;stacked&#39; | &#39;horizontal&#39;</em></td><td><code>stacked</code></td></tr><tr><td><code>title</code></td><td>Card 的标题</td><td><em>string | slot</em></td><td><code>-</code></td></tr><tr><td><code>subtitle</code></td><td>Card 的副标题</td><td><em>string | slot</em></td><td><code>-</code></td></tr></tbody></table><h4 id="插槽" tabindex="-1"><a class="header-anchor" href="#插槽" aria-hidden="true">#</a> 插槽</h4><table><thead><tr><th>插槽名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td><code>header</code></td><td>Card 的头部，位置在最上层</td><td><code>-</code></td></tr><tr><td><code>media</code></td><td>Card 的媒体部分</td><td><code>-</code></td></tr><tr><td><code>title</code></td><td>Card 的标题</td><td><code>-</code></td></tr><tr><td><code>subtitle</code></td><td>Card 的副标题</td><td><code>-</code></td></tr><tr><td><code>content</code></td><td>Card 的内容部分</td><td><code>-</code></td></tr><tr><td><code>action</code></td><td>Card 的操作组，位置在卡片底部</td><td><code>-</code></td></tr></tbody></table><h3 id="card-header" tabindex="-1"><a class="header-anchor" href="#card-header" aria-hidden="true">#</a> Card.Header</h3><h4 id="属性-1" tabindex="-1"><a class="header-anchor" href="#属性-1" aria-hidden="true">#</a> 属性</h4><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td><code>head</code></td><td>Header 的标头</td><td><em>string | slot</em></td><td><code>-</code></td></tr><tr><td><code>subhead</code></td><td>Card 的副标头</td><td><em>string | slot</em></td><td><code>-</code></td></tr></tbody></table><h4 id="插槽-1" tabindex="-1"><a class="header-anchor" href="#插槽-1" aria-hidden="true">#</a> 插槽</h4><table><thead><tr><th>插槽名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td><code>avatar</code></td><td>头像/图标，也可在单独使用 Header 时做媒体插槽</td><td><code>-</code></td></tr><tr><td><code>head</code></td><td>Header 的标头</td><td><code>-</code></td></tr><tr><td><code>subhead</code></td><td>Card 的副标头</td><td><code>-</code></td></tr><tr><td><code>extra</code></td><td>右上角的操作区域</td><td><code>-</code></td></tr></tbody></table><h2 id="more-demo" tabindex="-1"><a class="header-anchor" href="#more-demo" aria-hidden="true">#</a> More demo</h2><!----><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/Daydreamer-riri/MaterialYouUI/edit/main/guide/docs/card.md" rel="noopener noreferrer" target="_blank" aria-label="Edit this page"><!--[--><!--]--> Edit this page <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: daydreamerriri@outlook.com">riri</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/assets/app.e276f379.js" defer></script>
  </body>
</html>
